<script setup lang="ts">
const footerBtns = () => {

}
const formInputMap = ref({
  name: '',
  num: '',
  time: ''
})
</script>

<template>
  <div class="container">
    <div class="header">
      <NavBar title="个人信息" :showRightIcon="false" />
    </div>
    <div class="content">
      <div class="person-info-box">
        <div class="person-info-box-avatar flex middle ">
          <van-image round width="88px" height="88px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          <img src="@/assets/images/icon/my-account/person-edit.png">
        </div>
        <div class="person-info-box-form form-mt">
          <FormInput v-model="formInputMap.name" title="姓名" />
          <FormInput v-model="formInputMap.num" title="Email" />
          <FormInput v-model="formInputMap.num" :isPhone="true" title="手机号" />
          <FormInput class="form-mr" :showRightIcon="true" v-model="formInputMap.time" title="出生日期" titleRight="日期筛选"  />
          <FormInput class="form-mr" :showSixRightIcon="true" v-model="formInputMap.time" title="性别" titleRight="性别选择" />
          <FormInput v-model="formInputMap.num" title="Street Address" />
        </div>
      </div>
    </div>
    <div class="footer">
      <FooterBtn @footerBtn="footerBtns" title="保存" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.person-info-box {
  padding: 10px;

  &-avatar {
    margin: 0 auto;
    position: relative;
    width: 44px;
    & img {
      height: 12px;
      position: absolute;
      bottom: 0;
      left: 30px;
      top: 30px;
    }
  }

  &-form {}
}
</style>
